AJAX রিকোয়েস্ট এবং পার্সিয়াল পেজ আপডেট ব্যবহার করে ফর্মকে ডাইনামিক করা একটি কার্যকরী উপায়। HTMX ব্যবহার করে, আপনি পেজ রিফ্রেশ না করে ইনপুট ফিল্ড এবং অন্যান্য অংশগুলি ডাইনামিকভাবে আপডেট করতে পারেন। নিচে HTMX এর সাহায্যে AJAX রিকোয়েস্ট এবং পার্সিয়াল পেজ আপডেটের মাধ্যমে একটি ডাইনামিক ফর্ম তৈরি করার উদাহরণ দেওয়া হলো।
উদাহরণ: HTMX দিয়ে একটি ডাইনামিক ফর্ম তৈরি করা
1. প্রোজেক্ট সেটআপ
ধরি, আমরা একটি ফর্ম তৈরি করব যেখানে ব্যবহারকারী একটি শহরের নাম প্রদান করবে এবং এটি একটি AJAX রিকোয়েস্টের মাধ্যমে শহরের আবহাওয়া ডেটা নিয়ে আসবে।
Flask এর মাধ্যমে উদাহরণ
Flask ইনস্টল করুন:
pip install flask
Flask অ্যাপ্লিকেশন তৈরি করুন:
app.py:
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/get-weather', methods=['GET'])
def get_weather():
city = request.args.get('city')
# For simplicity, returning dummy data. In a real app, you could fetch data from a weather API.
weather_data = {
'New York': 'Sunny, 25°C',
'London': 'Rainy, 15°C',
'Tokyo': 'Cloudy, 20°C'
}
return jsonify({'weather': weather_data.get(city, 'City not found')})
if __name__ == '__main__':
app.run(debug=True)
2. HTMX ব্যবহার করে HTML ফাইল তৈরি করুন
templates/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Form Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Check Weather</h2>
<form onsubmit="return false;">
<input type="text" id="city" placeholder="Enter city name" required>
<button hx-get="/get-weather" hx-target="#weather-result" hx-params="city">Get Weather</button>
</form>
<div id="weather-result">Weather information will be displayed here...</div>
<script>
document.addEventListener('htmx:beforeRequest', function(event) {
const city = document.getElementById('city').value;
event.detail.parameters = { city: city }; // Pass city name to the server
});
</script>
</body>
</html>
3. HTMX ব্যবহার করে ডাইনামিক ফর্মের কাজের ব্যাখ্যা
- Form Handling: ফর্মে শহরের নাম প্রবেশ করার পরে "Get Weather" বাটনে ক্লিক করলে, HTMX একটি GET রিকোয়েস্ট পাঠায়
/get-weatherURL এ। - Dynamic Parameter: HTMX
hx-paramsব্যবহার করে ইনপুট ফিল্ডের মান (শহরের নাম) সার্ভারে পাঠায়। - AJAX Request: AJAX রিকোয়েস্টের মাধ্যমে সার্ভার থেকে আবহাওয়ার তথ্য পাওয়া যায়।
- Partial Update: সার্ভার থেকে প্রাপ্ত আবহাওয়ার তথ্য
#weather-resultID যুক্ত ডিভে প্রদর্শিত হয়, যা পেজের অন্য অংশে প্রভাব ফেলে না।
4. HTML Response Handling
JSON Response Example:
# Continue from the previous Flask app
@app.route('/get-weather', methods=['GET'])
def get_weather():
city = request.args.get('city')
weather_data = {
'New York': 'Sunny, 25°C',
'London': 'Rainy, 15°C',
'Tokyo': 'Cloudy, 20°C'
}
return jsonify({'weather': weather_data.get(city, 'City not found')})
# Update the AJAX handling in the HTMX part if needed.
5. টেস্টিং এবং রান করা
Flask অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
bash
Copy code
python app.py
এখন আপনার ব্রাউজারে http://127.0.0.1:5000 এ যান। শহরের নাম লিখে "Get Weather" বাটনে ক্লিক করলে, সঠিক আবহাওয়ার তথ্য ডিসপ্লে হবে।
উপসংহার
HTMX ব্যবহার করে AJAX রিকোয়েস্ট এবং পার্সিয়াল পেজ আপডেটের মাধ্যমে একটি ডাইনামিক ফর্ম তৈরি করা খুব সহজ এবং কার্যকর। এটি ইউজার এক্সপেরিয়েন্সকে উন্নত করে এবং ব্যবহারকারীদের দ্রুত প্রতিক্রিয়া দেয়। HTMX এর এই শক্তিশালী ফিচারগুলি ব্যবহার করে আরও জটিল এবং ইন্টারঅ্যাকটিভ ফর্ম তৈরি করা সম্ভব।
Read more
